<template>
	<view class="oil-details">
		<!--  -->
		<view class="deta-top">
			<image src="../../static/c6.jpg" mode="widthFix" class="image"></image>
			<view class="top-posi">
				<uni-icons type="back" size="40" @click="back()"></uni-icons>
				<text class="wz">{{oilName}}</text>
				<image src="../../static/ai.png" mode="widthFix" class="image1"></image>
			</view>
			<view class="top-bottom">
				<view class="bott-title flex">
					<text class="head-tit">{{oilName}}</text>
					<image src="../../static/c6.jpg" mode="" class="head-portrait"></image>
				</view>
				<view class="bott-address ">
					<view class="address-left">
						<text class="addre">{{address}}</text>
						<view class="addres">{{distance}}</view>
					</view>
					<view class="address-right">
						<view class="tu-icon">
							<uni-icons type="paperplane-filled" size="25"></uni-icons>
						</view>
						<view class="dah">导航</view>
					</view>
				</view>
				<view class="bott-bottom">
					<view class="co">
						<uni-icons type="shop" size="15"></uni-icons>
						<text>24小时营业</text>
					</view>
					<view class="">
						<uni-icons type="cart-filled" size="15"></uni-icons>
						<text>油站开发票</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 选项卡  -->
		<view class="tab-toggle">
			<!-- 内容 -->
			<view class="tab-content">
				<!-- 选项 -->
				<view class="tab-option">
					<dl v-for="(item,index) in option" :key="index" class='opt' @click="dianji(index)"
						:class="[ currt== index ? 'active': '']">
						<dt>{{item.name}}</dt>
						<dd></dd>
					</dl>
				</view>
				<!-- 选项内容 -->
				<view class="option-cont" v-show="currt==0">
					<!-- 标题1 -->
					<view class="option-tit">请选择油号 | 枪号</view>
					<!--  -->
					<view class="qiyou flex">
						<view class="tanchuang">
							<view class="tan">

								<view class="one-right" @click="sell">
									<p><text>92#</text>
										<uni-icons type="bottom" size="20"></uni-icons>
									</p>

								</view>
								<view class="share">
									<view :class="{'box': share}" @click="display">
									</view>
									<view class="share-item" :class="{'show': share}">
										<view class="share-con">
											<p class="title">选择油号/抢号<span @click.stop="display">×</span></p>
											<view class="share_content">
												<h1>全部商品</h1>
												<view class="s-c">
													<view class="s-ul-li" v-for="(item,index) in s_list1" :key="index"
														:class="[ currt1== index ? 'high': '']" @click="dianji1(index)">
														{{item.title}}

													</view>
												</view>
												<h1>选择油号</h1>
												<view class="s-c1">
													<ul v-for="(item,index) in price" :key="index" class="s-c" v-if="currt1==index">
														<li v-for="(items,indexs) in item.content" :key="indexs"
															 @click="dianji2(indexs)"
															class="s-ul-li" :class="[ currt2== indexs ? 'high': '']">
															{{items.num}}
														</li>

													</ul>
												</view>
												<h1>选择枪号</h1>
												<view class="s-c1">
													<ul  class="s-c" >
														<li v-for="(item,index) in qh" :key="index"
															 v-if="currt3==index"
															class="s-ul-li" :class="[ currt3== index ? 'high': '']">
															{{item.num}}
														</li>
												
													</ul>
												</view><!--tab切换-->
												<view style="height: 60rpx;line-height: 60rpx;font-size: 27rpx;">
													<p  >
														重要说明:
													</p>
													<p>1、请先加油后下单，即您到站后，与工作人员确认油号、枪号后再付款。</p>
													<p>2、请勿先付款后加油。若您己先下单付款，请于24小时内到加油站完成加油﹔若您在48小时内未完成加油，请及时发起退单;逾期退单可能会退单失败.</p>
												</view>
											</view>
										</view>
									</view>
								</view>

							</view>
							<view class="price">
								￥<text class="cheng">7.67</text>/L
								<uni-icons type="plus-filled"></uni-icons>
							</view>
						</view>
						<view class="oil-price">
							<view class="">油站价￥8.17/L</view>
							<view class="">国标价￥8.17/L</view>
						</view>
					</view>
					<view class="notes">加完返油金 <text class="oil-gold">0.05</text>/L </view>
					<!-- 标题二 -->
					<view class="option-tit">请选择枪号</view>
					<view class="gun-number flex">
						<view class="">请选择枪号</view>
						<uni-icons type="bottom"></uni-icons>
					</view>
					<!-- 标题三 -->
					<view class="option-tit">请输入金额</view>
					<view class="amount-of-money flex">
						<view class="hao">￥
							<input type="text" placeholder="请输入油机金额" />
						</view>
						<view class="rise">0.00L</view>
					</view>
					<view class="preferential flex">
						<view class="preferential-item" v-for="(item,index) in preferential" :key="index">
							<view class="sum">￥{{item.sum}}</view>
							<view class="sum-discount">可优惠￥{{item.discount}}</view>
						</view>
					</view>
					<!--  -->
					<view class="refueling-coupon">
						<view class="cou-top">
							<view class="cou-left">
								<image src="../../static/images/six_03.png" mode="widthFix" class="yyyy"></image>
								<view class="yuan">
									<view class="jjj">66元加油券</view>
									<view class="hhh">满200-22元加油券*3张；每月生效1张，31天内有效</view>
									<view class="kkk">
										随单购注意事项 <uni-icons type="forward" size="10"></uni-icons>
									</view>
								</view>
							</view>
							<view class="cou-right">
								<view class=""> ￥ <text>29.95</text> </view>
								<label class="radio">
									<radio value="" /><text></text>
								</label>
							</view>
						</view>
						<view class="cou-bottom flex">
							<view class="vvvv">￥0.00</view>
							<view class="zzzz">去支付</view>
						</view>
					</view>

				</view>
				<!--  -->
				<view class="option-cont" v-show="currt==1">
					<!-- 标题1 -->
					<view class="option-tit">油站保障</view>
					<!--  -->
					<view class="guarantee">
						<view class="guarantee-left">
							<uni-icons type="folder-add" size="25"></uni-icons>
						</view>
						<view class="guarantee-right">
							<view class="guarantee-tit">营业资质</view>
							<view class="guarantee-title">查看营业资质详情</view>
						</view>
					</view>
					<!--  -->
					<!-- 标题1 -->
					<view class="option-tit">车友印象</view>
					<view class="impression">
						<view class="impression-item" v-for="(item,index) in impression1" :key="index">{{item.name}}
						</view>
					</view>



				</view>

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				currt: 0,
				currt1: 0,
				currt2: 0,
				currt3: 0,
				oilName: '泰安服务区东区加油站',
				address: "山东省泰安市岱岳区太平街道京台高速K426,5+000泰安服务区东区",
				distance: "距4.22km  高速服务区",
				option: [{
					id: 1,
					name: '立即加油'
				}, {
					id: 2,
					name: '油站详情'
				}],
				preferential: [{
						sum: 200,
						discount: '17.39',
					},
					{
						sum: 300,
						discount: '12.01',
					},
					{
						sum: 400,
						discount: '22.78',
					}
				],

				impression1: [{
						id: 1,
						name: '支付快捷(3)'
					},
					{
						id: 2,
						name: '油价便宜(2)'
					},
					{
						id: 3,
						name: '加油量阻足(1)'
					},
					{
						id: 4,
						name: '油品质量好(1)'
					},
					{
						id: 5,
						name: '环境干净整洁(1)'
					},
					{
						id: 6,
						name: '服务态度好(1)'
					},
				],
				share: false,
				s_list1: [{
						id: '1',
						title: '汽油',
						qhao: '1号'
					},
					{
						id: '2',
						title: '柴油',
						qhao: '3号'
					}
				],
				price: [{
					id: '1',
					content: [{
							ids: '1',
							num: '92#',
						},
						{
							ids: '2',
							num: '95#',
						},
					]
				}, {
					id: '2',
					content: [{
							ids: '1',
							num: '0#',
						},

					]
				} ],
				qh: [{
					id: '1',
					num:'1号'
				}, {
					id: '2',
					num:'3号'
				}, ],
			

			}
		},
		onLoad() {

		},
		// 定义方法
		methods: {
			dianji: function(id) {
				this.currt = id
				console.log(id)
			},
			dianji1: function(id) {
				this.currt1 = id
				this.currt3=id
			},
			dianji2: function(id) {
				this.currt3 =id
				this.currt2 = id
			},
			back: function() {
				uni.switchTab({
					url: "../../pages/index/index1"
				})
			},
			sell() {
				this.share = true;
			},
			// 隐藏分享
			display() {
				this.share = false;
			},
		},


	}
</script>

<style lang="scss">
	@import url("../../static/css/index(1).css");
	@import url("../../static/css/detail.css");
</style>
